<template>
  <div class="bookmarks-container">
    <button
      @click="showBookmarkModal = true"
      class="bookmarks-trigger"
      title="书签管理"
    >
      <i class="fas fa-bookmark"></i>
    </button>

    <!-- 书签管理模态框 -->
    <div
      v-if="showBookmarkModal"
      class="modal-overlay"
      @click="showBookmarkModal = false"
    >
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>书签管理</h3>
          <button @click="showBookmarkModal = false" class="close-btn">
            <i class="fas fa-times"></i>
          </button>
        </div>

        <div class="modal-body">
          <!-- 书签导入 -->
          <div class="bookmark-section">
            <h4>导入书签</h4>
            <div class="import-controls">
              <input
                ref="fileInput"
                type="file"
                accept=".html"
                @change="handleFileImport"
                style="display: none"
              />
              <button @click="$refs.fileInput.click()" class="btn-primary">
                <i class="fas fa-upload"></i>
                导入HTML文件
              </button>
              <span class="import-help"
                >支持Chrome、Firefox等浏览器导出的书签文件</span
              >
            </div>
          </div>

          <!-- 书签操作 -->
          <div class="bookmark-section">
            <h4>操作</h4>
            <div class="operation-controls">
              <button @click="exportBookmarks" class="btn-secondary">
                <i class="fas fa-download"></i>
                导出书签
              </button>
              <button @click="clearBookmarks" class="btn-danger">
                <i class="fas fa-trash"></i>
                清空书签
              </button>
              <button @click="mergeBookmarks" class="btn-success">
                <i class="fas fa-merge"></i>
                合并重复项
              </button>
            </div>
          </div>

          <!-- 文件夹操作 -->
          <div class="bookmark-section">
            <h4>文件夹操作</h4>
            <div class="folder-controls">
              <button @click="expandAllFolders" class="btn-outline">
                <i class="fas fa-expand-arrows-alt"></i>
                全部展开
              </button>
              <button @click="collapseAllFolders" class="btn-outline">
                <i class="fas fa-compress-arrows-alt"></i>
                全部折叠
              </button>
            </div>
          </div>

          <!-- 书签列表 -->
          <div class="bookmark-section">
            <h4>已保存的书签 ({{ bookmarks.length }})</h4>
            <div class="bookmark-list">
              <div
                v-for="(bookmarkGroup, folder) in groupedBookmarks"
                :key="folder"
              >
                <div class="folder-header" @click="toggleFolder(folder)">
                  <i
                    :class="[
                      'fas',
                      folderExpanded[folder] ? 'fa-folder-open' : 'fa-folder',
                    ]"
                  ></i>
                  <span>{{ folder || "未分类" }}</span>
                  <span class="folder-count">({{ bookmarkGroup.length }})</span>
                </div>
                <div v-show="folderExpanded[folder]" class="folder-content">
                  <div
                    v-for="bookmark in bookmarkGroup"
                    :key="bookmark.id"
                    class="bookmark-item"
                  >
                    <div class="bookmark-info">
                      <a
                        :href="bookmark.url"
                        target="_blank"
                        class="bookmark-title"
                      >
                        {{ bookmark.title }}
                      </a>
                      <div class="bookmark-url">{{ bookmark.url }}</div>
                    </div>
                    <div class="bookmark-actions">
                      <button
                        @click="removeBookmark(bookmark)"
                        class="action-btn delete-btn"
                        title="删除"
                      >
                        <i class="fas fa-trash"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

const showBookmarkModal = ref(false);
const fileInput = ref(null);
const bookmarks = ref([]);
const folderExpanded = ref({});

// 分组显示书签
const groupedBookmarks = computed(() => {
  const groups = {};
  bookmarks.value.forEach((bookmark) => {
    const folder = bookmark.folder || "未分类";
    if (!groups[folder]) {
      groups[folder] = [];
    }
    groups[folder].push(bookmark);
  });
  return groups;
});

// 初始化
onMounted(() => {
  loadBookmarks();
});

// 加载书签
function loadBookmarks() {
  try {
    const saved = localStorage.getItem("bookmarks");
    if (saved) {
      bookmarks.value = JSON.parse(saved);
    }
  } catch (error) {
    console.error("加载书签失败:", error);
  }
}

// 保存书签
function saveBookmarks() {
  try {
    localStorage.setItem("bookmarks", JSON.stringify(bookmarks.value));
  } catch (error) {
    console.error("保存书签失败:", error);
  }
}

// 切换文件夹展开状态
function toggleFolder(folder) {
  folderExpanded.value[folder] = !folderExpanded.value[folder];
}

// 展开所有文件夹
function expandAllFolders() {
  Object.keys(groupedBookmarks.value).forEach((folder) => {
    folderExpanded.value[folder] = true;
  });
}

// 折叠所有文件夹
function collapseAllFolders() {
  Object.keys(groupedBookmarks.value).forEach((folder) => {
    folderExpanded.value[folder] = false;
  });
}

// 导入书签
function handleFileImport(event) {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    const content = e.target.result;
    // 这里需要实现解析HTML书签文件的逻辑
    // 暂时使用示例数据
    const sampleBookmarks = [
      {
        id: 1,
        title: "Vue.js 官网",
        url: "https://cn.vuejs.org/",
        folder: "开发工具",
        addDate: Date.now(),
      },
      {
        id: 2,
        title: "GitHub",
        url: "https://github.com",
        folder: "开发工具",
        addDate: Date.now(),
      },
    ];
    bookmarks.value = sampleBookmarks;
    saveBookmarks();
  };
  reader.readAsText(file);
}

// 导出书签
function exportBookmarks() {
  // 实现导出书签的逻辑
}

// 清空书签
function clearBookmarks() {
  if (confirm("确定要清空所有书签吗？")) {
    bookmarks.value = [];
    saveBookmarks();
  }
}

// 合并重复书签
function mergeBookmarks() {
  // 实现合并重复书签的逻辑
}

// 删除书签
function removeBookmark(bookmark) {
  const index = bookmarks.value.findIndex((b) => b.id === bookmark.id);
  if (index > -1) {
    bookmarks.value.splice(index, 1);
    saveBookmarks();
  }
}
</script>

<style scoped>
.bookmarks-container {
  /* 移除margin，由父容器控制间距 */
}

.bookmarks-trigger {
  background: rgba(79, 209, 197, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(79, 209, 197, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  padding: 0;
  min-width: unset;
}

.bookmarks-trigger:hover {
  background: rgba(79, 209, 197, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(79, 209, 197, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
}

.modal-body {
  padding: 20px;
}

.bookmark-section {
  margin-bottom: 24px;
}

.bookmark-section h4 {
  margin: 0 0 12px;
  font-size: 16px;
}

.import-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.import-help {
  color: #666;
  font-size: 14px;
}

.operation-controls,
.folder-controls {
  display: flex;
  gap: 8px;
}

.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-outline {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-secondary {
  background: #718096;
  color: white;
}

.btn-danger {
  background: #e53e3e;
  color: white;
}

.btn-success {
  background: #48bb78;
  color: white;
}

.btn-outline {
  background: white;
  border: 1px solid #e2e8f0;
  color: #4a5568;
}

.btn-primary:hover {
  background: #5a67d8;
}
.btn-secondary:hover {
  background: #4a5568;
}
.btn-danger:hover {
  background: #c53030;
}
.btn-success:hover {
  background: #38a169;
}
.btn-outline:hover {
  background: #f7fafc;
}

.bookmark-list {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.folder-header {
  padding: 12px 16px;
  background: #f7fafc;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.folder-header:hover {
  background: #edf2f7;
}

.folder-count {
  color: #718096;
  font-size: 14px;
}

.folder-content {
  padding: 8px 16px;
}

.bookmark-item {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
}

.bookmark-item:last-child {
  border-bottom: none;
}

.bookmark-info {
  flex: 1;
  min-width: 0;
}

.bookmark-title {
  color: #2d3748;
  text-decoration: none;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

.bookmark-url {
  color: #718096;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookmark-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s ease;
}

.delete-btn {
  background: #fc8181;
}

.delete-btn:hover {
  background: #e53e3e;
}
</style>
